<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex基础概念</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="wrap none">
        <h2>flex基础概念</h2>
        <img src="images/01.png" alt="">
        <img src="images/02.png" alt="">

        <h3>此处需要注意,一般换行是向下换一行,设置成wrap-reverse,就是向上换一行</h3>
        <img src="images/03.png" alt="">
        <div style="width:100%;margin-bottom:20px;">
            <h2>flex-flow</h2>
            <h3>flex-flow: flex-direction || flex-wrap</h3>
            <p class="margin-bottom-20">
                设置了flex-wrap后,jsutify-content无效align-items也是无效
            </p>
            <p class="margin-bottom-20 red">
                flex-wrap:wrap-reverse时,align-content的start和end对调了,下面是默认的start
            </p>
            <ul class="demo1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>

        </div>
        <img src="images/04.png" alt="">
        <img src="images/05.png" alt="">
        <img src="images/06.png" alt="">
        <img src="images/07.png" alt="">
        <h3 class="red">baseline: 项目的第一行文字的基线对齐。</h3>
        <img src="images/08.png" alt="">
        <img src="images/09.png" alt="">
    </div>

    <div class="wrap none">
        <h2>排序属性order</h2>
        <h3>大家默认都是0,这个时候数字越小越靠前</h3>
        <p class="red margin-bottom-20">设置了第7个元素 order:-1,所以它是最小, 然后它在最前面</p>
        <p class="margin-bottom-20">

        </p>
        <p class="margin-bottom-20 red">

        </p>
        <ul class="demo2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>

    <div class="wrap none">
        <h2>放大属性flex-grow</h2>
        <h3>flex-grow: number; /* default 0 */</h3>
        <p class="red margin-bottom-20">如果其他元素都为0, 遇到剩余空间不会填充,<br />单独设置元素7为flex-grow:2,没有其他元素设置的话,全占剩余空间</p>
        <p class="margin-bottom-20">

        </p>
        <p class="margin-bottom-20 red">

        </p>
        <ul class="demo3">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <p class="red margin-bottom-20">元素(设置为150px)都为1会自动填满,所以第一行都是160px</p>
        <p class="red margin-bottom-20">其他元素都为1, 单独设置元素7为flex-grow:2, 所以分配剩余空间325px时他比6和8宽一倍</p>
        <ul class="demo4">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <p class="red margin-bottom-20">当空间不够时,flex-grow是失效的,</p>
        <p class="red margin-bottom-20">一定是剩余空间分配时,2比1多占一份</p>
        <ul class="demo5">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>

    <div class="wrap none">
        <h2>缩小属性flex-shrink</h2>
        <h3>flex-shrink: number; /* default 1 */</h3>
        <p class="red margin-bottom-20">如果其他元素都为1, 空间不足时会主动缩小,<br />单独设置元素7为flex-shrink:0,所以他不会缩小</p>
        <p class="margin-bottom-20">

        </p>
        <p class="margin-bottom-20 red">

        </p>
        <ul class="demo6">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <p class="red margin-bottom-20">空间足够时flex-shrink设了也无效</p>

        <ul class="demo7">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>


    </div>


    <div class="wrap none">
        <h2>项目占据主轴空间flex-basis</h2>
        <h3>flex-basis: length; /* default auto */</h3>
        <p class="red margin-bottom-20">可以覆盖width;属性定义了在分配多余空间之前，项目占据的主轴空间（main size）</p>
        <p class="margin-bottom-20">
            此时项目7width设置50px, flex-basis设置的是200px;
        </p>
        <p class="margin-bottom-20 red">

        </p>
        <ul class="demo8">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>

        <p class="margin-bottom-20">
            此时项目7width设置200px, flex-basis设置的是400px;不缩小,;
        </p>
        <p class="margin-bottom-20 red">

        </p>
        <ul class="demo9">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>

        </ul>


    </div>

    <div class="wrap none">
        <h2>flex 简写</h2>
        <h3>auto (1 1 auto) 会放大,也会缩小,项目width不改变</h3>
        <h3>none (0 0 auto) 不放大,不会缩小,项目width不改变</h3>
        <h3>不设置的情况下默认是 (0 1 auto) 不放大,会缩小,width不改变</h3>
        <img src="images/10.png" alt="">




    </div>

    <div class="wrap ">
        <h2>align-self</h2>
        <h3>align-self: auto | flex-start | flex-end | center | baseline | stretch;</h3>
        <p class="red margin-bottom-20">默认是atuo,就是继承align-item的属性值</p>
        <p class="margin-bottom-20">

        </p>
        <p class="margin-bottom-20 red">
            当前设置了第3个为 align-self:flex-end;
        </p>
        <ul class="demo10">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>


    </div>




</body>

</html>